<template>
    <view class="filter-container">
        <view class="filter-content-warps">
            <!-- 筛选按钮 -->
            <view class="filter-bar">
                <view class="filter-item" @click="showFilter('time')">
                    <text>出发时间</text>
                    <image src="/static/home/filter.png" class="filter-arrow"></image>
                </view>
                <view class="filter-item" @click="showFilter('seats')">
                    <text>剩余座数</text>
                    <image src="/static/home/filter.png" class="filter-arrow"></image>
                </view>
            </view>
            <!-- 筛选面板 -->
            <view class="filter-panel" v-if="showPanel">
                <!-- 出发时间筛选 -->
                <view class="filter-options" v-if="currentFilter === 'time'">
                    <view class="option-item" :class="{ active: timeFilter === 'all' }" @click="selectTime('all')">
                        全部
                    </view>
                    <view class="option-item" :class="{ active: timeFilter === 'today' }" @click="selectTime('today')">
                        今 ({{ today }}日)
                    </view>
                    <view class="option-item" :class="{ active: timeFilter === 'tomorrow' }"
                        @click="selectTime('tomorrow')">
                        明 ({{ tomorrow }}日)
                    </view>
                    <view class="option-item" :class="{ active: timeFilter === 'after' }" @click="selectTime('after')">
                        后 ({{ afterTomorrow }}日)
                    </view>
                </view>

                <!-- 剩余座数筛选 -->
                <view class="filter-options" v-if="currentFilter === 'seats'">
                    <view class="option-item" :class="{ active: seatsFilter === 'all' }" @click="selectSeats('')">
                        全部
                    </view>
                    <view class="option-item" :class="{ active: seatsFilter === '2' }" @click="selectSeats('2')">
                        2座以上
                    </view>
                    <view class="option-item" :class="{ active: seatsFilter === '3' }" @click="selectSeats('3')">
                        3座以上
                    </view>
                    <view class="option-item" :class="{ active: seatsFilter === '4' }" @click="selectSeats('4')">
                        4座以上
                    </view>
                    <view class="option-item" :class="{ active: seatsFilter === '5' }" @click="selectSeats('5')">
                        5座以上
                    </view>
                    <view class="option-item" :class="{ active: seatsFilter === '6' }" @click="selectSeats('6')">
                        6座以上
                    </view>
                    <view class="option-item" :class="{ active: seatsFilter === '7' }" @click="selectSeats('7')">
                        7座以上
                    </view>
                </view>

                <!-- 底部操作按钮 -->
                <view class="filter-actions">
                    <view class="action-btn reset" @click="resetFilters">重置</view>
                    <view class="action-btn confirm" @click="confirmFilters">确定</view>
                </view>
            </view>
        </view>

        <!-- 遮罩层 -->
        <view class="filter-mask" v-if="showPanel" @click="hidePanel"></view>
    </view>
</template>
<script>
export default {
    data() {
        // 获取当前日期信息
        const today = new Date();
        const tomorrow = new Date(today);
        tomorrow.setDate(tomorrow.getDate() + 1);
        const afterTomorrow = new Date(tomorrow);
        afterTomorrow.setDate(afterTomorrow.getDate() + 1);

        return {
            showPanel: false,          // 是否显示筛选面板
            currentFilter: '',         // 当前显示的筛选类型

            // 筛选条件
            timeFilter: 'all',        // 出发时间筛选
            seatsFilter: '',       // 座位数筛选

            // 日期显示
            today: today.getDate(),
            tomorrow: tomorrow.getDate(),
            afterTomorrow: afterTomorrow.getDate()
        }
    },
    methods: {
        // 显示筛选面板
        showFilter(type) {
            this.currentFilter = type;
            this.showPanel = true;
        },

        // 隐藏筛选面板
        hidePanel() {
            this.showPanel = false;
        },

        // 选择出发时间
        selectTime(type) {
            this.timeFilter = type;
        },

        // 选择座位数
        selectSeats(type) {
            this.seatsFilter = type;
        },

        // 重置筛选条件
        resetFilters() {
            this.timeFilter = 'all';
            this.seatsFilter = '';
        },

        // 确认筛选条件
        confirmFilters() {
            this.hidePanel();
            // 触发筛选事件，将筛选条件传递给父组件
            this.$emit('filter', {
                time: this.timeFilter,
                seats: this.seatsFilter
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.filter-container {
    position: relative;
    z-index: 10;
    .filter-content-warps{
        position: fixed;
        top: 84rpx;
        left: 0;
        right: 0;
        background-color: #fff;
        z-index: 100;
    }
}

/* 筛选栏样式 */
.filter-bar {
    display: flex;
    justify-content: space-around;
    // padding: 26px 0;
    width: 100%;
    height: 88rpx;

}

.filter-item {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #0B1F20;
}

.filter-arrow {
    width: 28rpx;
    height: 28rpx;
    margin-left: 8rpx;
}

/* 筛选面板样式 */
.filter-panel {

    padding: 30rpx;
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40rpx;
}

.option-item {
    padding: 16rpx 30rpx;
    margin: 10rpx;
    border: 2rpx solid #eee;
    border-radius: 8rpx;
    font-size: 26rpx;
    color: #666;
}

.option-item.active {
    color: rgba(255, 121, 55, 1);
    border-color: rgba(255, 121, 55, 1);
    background-color: rgba(255, 121, 55, 0.05);
}

/* 操作按钮样式 */
.filter-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
}

.action-btn {
    flex: 1;
    padding: 20rpx 0;
    text-align: center;
    border-radius: 8rpx;
    font-size: 28rpx;
}

.reset {
    margin-right: 20rpx;
    background-color: #f5f5f5;
    color: #666;
}

.confirm {
    margin-left: 20rpx;
    background: linear-gradient(90deg, #FF3F39 0%, #FF7937 100%);
    color: #fff;
}

/* 遮罩层样式 */
.filter-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
}
</style>